<template>
  <div :id="chartId" style="width:100%;height:100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
    name: 'StackColumnar',
    components: {

    },
    props: {
        chartId: { type: String, default: function() { return 'myCharts' } }, // 图表domid
        title: { type: Object, default: function() { return { name: '', align: 'center', 'size': '15', textStyle: { fontWeight: 400 }} } }, // 统计图标题 对齐方式可设置为left center right 百分比形式
        top: { type: String, default: function() { return '5%' } }, // 图表上边距
        right: { type: String, default: function() { return '1%' } }, // 图表右边距
        bottom: { type: String, default: function() { return '2%' } }, // 图表下边距
        left: { type: String, default: function() { return '1%' } }, // 图表左边距
        xData: { type: Array, default: function() { return [] } }, // x轴数据
        yData: { type: Array, default: function() { return [] } }, // y轴数据
        color: { type: Array, default: function() { return ['#1E90FF'] } }, // 柱状图颜色
        legendData: { type: Array, default: function() { return [] } }, // 图例名称
        legendOrient: { type: String, default: function() { return 'horizontal' } }, // 'horizontal' 'vertical'
        legendLeft: { type: String, default: function() { return 'center' } }, // 图例组件离容器左侧的距离。
        legendBottom: { type: String, default: function() { return '0px' } }, // 图例组件离容器底部的距离。
        xytextStyle: { type: Object, default: function() { return { xcolor: '#000', ycolor: '#000' } } }, // 数轴字体颜色
        yUnit: { type: Object, default: function() { return { name: '', align: 'center', 'size': '12', position: 'left', lineColor: '#000' } } }, // y轴单位 对齐方式可设置为left center right 百分比形式
        xUnit: { type: Object, default: function() { return { name: '', align: 'end', 'size': '12' } } }, // x轴单位 对齐方式可设置为left center right 百分比形式
        barGradient: { type: Object, default: function() { return { type: false, color: [] } } }, // 柱状图渐变色
        barWidth: { type: Object, default: function() { return { type: false, width: '' } } }, // 每个柱状图 主子的宽度 type为true 接受自定义 否则默认
        isLegend: { type: Boolean, default: function() { return true } }, // 是否显示图例
        xLabelFormatter: { type: Function, default: null }, // x轴数据格式化
        tooltipFormat: { type: String, default: null }
    },
    data() {
        return {
            myChart: null
        }
    },
    computed: {

    },
    watch: {
        yData(val) {
            this.creatEcharts()
        },
        xData(val) {
            this.creatEcharts()
        }
    },
    created() {
        window.addEventListener('resize', this.onresize)
        this.$bus.on('toggleClick', () => {
            setTimeout(() => {
                this.$nextTick(() => {
                    this.onresize()
                })
            }, 300)
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.onresize)
        this.$bus.off('toggleClick', this.onresize)
    },
    mounted() {
        this.creatEcharts()
        setTimeout(() => {
            this.onresize()
        }, 300)
    },
    methods: {
        creatEcharts() {
            const vessel = document.querySelector('#' + this.chartId)
            const myChart = echarts.init(vessel)
            this.myChart = myChart
            const _this = this
            const newSeries = []
            this.legendData.forEach((item, i) => {
                const child = {
                    name: item,
                    type: 'bar',
                    stack: '总量',
                    itemStyle: { normal: { label: { show: true, position: 'inside', formatter: params => {
                        return params.data > 0 ? params.data : ''
                    } }}},
                    data: this.xData[i]
                }
                if (this.barWidth.type) {
                    child.barWidth = this.barWidth.width
                }
                if (this.barGradient.type) {
                    child.itemStyle = {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, this.barGradient.color
                            )
                        }
                    }
                }
                newSeries.push(child)
            })

            const option = {
                title: {
                    text: this.title.name,
                    left: this.title.align || 'center',
                    size: this.title.size || '15',
                    textStyle: this.title.textStyle
                },
                color: this.color,
                tooltip: {
                    show: true,
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: this.tooltipFormat
                },
                legend: {
                    // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
                    data: this.legendData,
                    orient: this.legendOrient,
                    left: this.legendLeft, // 延Y轴居中
                    bottom: this.legendBottom,
                    selectedMode: 'multiple',
                    show: this.isLegend
                },
                grid: {
                    left: this.left,
                    right: this.right,
                    top: this.top,
                    bottom: this.bottom,
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'value',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: this.xUnit.lineColor || '#000'
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.xytextStyle.xcolor
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'category',
                        // data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        data: this.yData,
                        axisLine: {
                            lineStyle: {
                                color: this.yUnit.lineColor || '#000'
                            }
                        },
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.xytextStyle.ycolor
                            },
                            formatter: function(value, index) {
                                if (_this.xLabelFormatter !== null) {
                                    const text = _this.xLabelFormatter(value, index)
                                    return text
                                } else {
                                    return value
                                }
                            }
                        }
                    }
                ],
                series: newSeries
            }
            // 为echarts对象加载数据
            myChart.setOption(option, true)
        },
        onresize() {
            if (this.myChart !== null) {
                this.myChart.resize()
            }
        }
    }
}
</script>

<style scoped lang="scss">

</style>
